<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>五笔助手配置</title>
    <link rel="stylesheet" href="../../assets/scss/wubi.css">
</head>
<body class="config">

<div v-cloak id="app" class="container">

    <section>
        <div class="section-title">
            <h3>选择初始文件</h3>
            <div class="desc">程序打开时，自动载入的码表文件</div>
        </div>
        <div class="section-content">
            <div class="config-file-list">
                <div @click="setInitFile(file)"
                     :class="['config-file-list-item', {active: file.path === config.initFileName}]"
                     v-for="(file, index) in fileList"
                     :key="index"
                     v-if="fileList"
                >
                    <div class="name">{{file.name}}</div>
                    <div class="path">{{file.path}}</div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="section-title">
            <h3>自动布署</h3>
            <div class="desc">添加新用户词之后，是否保存当前自动布署</div>
        </div>
        <div class="section-content">
            <div class="check-item">
                <div class="label">加词后，自动保存并布署输入法</div>
                <div class="audio-switch">
                    <input v-model="config.autoDeployOnAdd" checked type="checkbox" id="autoDeployAdd">
                    <label for="autoDeployAdd"></label>
                </div>
            </div>
            <div class="check-item">
                <div class="label">删词后，自动保存并布署输入法</div>
                <div class="audio-switch">
                    <input v-model="config.autoDeployOnDelete" checked type="checkbox" id="autoDeployDelete">
                    <label for="autoDeployDelete"></label>
                </div>
            </div>
            <div class="check-item">
                <div class="label">编辑词后，自动保存并布署输入法</div>
                <div class="audio-switch">
                    <input v-model="config.autoDeployOnEdit" checked type="checkbox" id="autoDeployEdit">
                    <label for="autoDeployEdit"></label>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="section-title">
            <h3>回车动作</h3>
            <div class="desc">定义搜索框中按回车键的动作</div>
        </div>
        <div class="section-content">
            <div class="check-list">
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="add"
                               v-model="config.enterKeyBehavior"
                               name="enterKey" id="radioAddNew" type="radio">
                        <label class="radio" for="radioAddNew"></label>
                    </div>
                    <div class="label">添加新词</div>
                </div>
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="search"
                               v-model="config.enterKeyBehavior"
                               name="enterKey" id="radioSearch" type="radio">
                        <label class="radio" for="radioSearch"></label>
                    </div>
                    <div class="label">搜索</div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="section-title">
            <h3>搜索</h3>
            <div class="desc">搜索匹配的内容</div>
        </div>
        <div class="section-content">
            <div class="check-list">
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="code"
                               v-model="config.searchMethod"
                               name="searchMethod" id="radioSearchCode" type="radio">
                        <label class="radio" for="radioSearchCode"></label>
                    </div>
                    <div class="label">编码</div>
                </div>
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="phrase"
                               v-model="config.searchMethod"
                               name="searchMethod" id="radioSearchPhrase" type="radio">
                        <label class="radio" for="radioSearchPhrase"></label>
                    </div>
                    <div class="label">词条</div>
                </div>
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="both"
                               v-model="config.searchMethod"
                               name="searchMethod" id="radioSearchBoth" type="radio">
                        <label class="radio" for="radioSearchBoth"></label>
                    </div>
                    <div class="label">编码 和 词条</div>
                </div>
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="any"
                               v-model="config.searchMethod"
                               name="searchMethod" id="radioSearchAny" type="radio">
                        <label class="radio" for="radioSearchAny"></label>
                    </div>
                    <div class="label">编码 或 词条</div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="section-title">
            <h3>配置文件目录</h3>
            <div class="desc">工具自动读取的输入法配置文件目录</div>
        </div>
        <div class="section-content">
            <div class="check-item">
                <p>{{config.rimeHomeDir || '默认目录'}}</p>
                <div class="btn btn-primary" @click="chooseRimeHomeDir">选择目录</div>
            </div>
        </div>
    </section>

    <section>
        <div class="section-title">
            <h3>选择参考码表</h3>
            <div class="desc">添加新词时、批量生成编码时，使用的码表，格式：前词后码，tab 分隔。</div>
            <div class="desc">正常的 Rime 码表文件都能正常使用，有多字也无所谓，程序会自动只选取单字部分使用。</div>
            <div class="desc">默认情况下，程序使用 wubi86_jidian.dict.yaml 这个文件作为参考码表。</div>
            <div class="desc">可以载入任意版本的五笔码表文件，这样就能生成对应版本的五笔编码了。</div>
        </div>
        <div class="section-content">
            <div class="check-item">
                <p>{{config.hasSetDictMap? '已添加码表文件': '请选择码表文件'}}</p>
                <div class="btn btn-primary" @click="setDictMap">选择文件</div>
            </div>
        </div>
    </section>

    <section>
        <div class="section-title">
            <h3>主题</h3>
            <div class="desc">切换主题</div>
        </div>
        <div class="section-content">
            <div class="check-list">
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="black"
                               v-model="config.theme"
                               name="theme" id="themeBlack" type="radio">
                        <label class="radio" for="themeBlack"></label>
                    </div>
                    <div class="label">暗黑</div>
                </div>
                <div class="check-item">
                    <div class="checkbox-cell">
                        <input value="auto"
                               v-model="config.theme"
                               name="theme" id="themeAuto" type="radio">
                        <label class="radio" for="themeAuto"></label>
                    </div>
                    <div class="label">跟随系统</div>
                </div>
            </div>
        </div>
    </section>
</div>

<script src="Config.js"></script>
</body>
</html>
